<template>
    <view class="gradeDetail">
        <view class="search_top_back" style="position: relative; height: 500rpx">
            <view class="search_top_nav">
                <view :style="{ height: statusBarHeight }" class="status_bar"></view>
                <view class="search_nav_content">
                    <view @click="back" style="width: 76rpx; height: 88rpx">
                        <image
                            style="margin-left: 28rpx; height: 36rpx; width: 20rpx; margin-top: 26rpx"
                            src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/back.png"
                        ></image>
                    </view>
                    <label class="search_title">我的等级</label>
                </view>
            </view>

            <view class="bg-color1"></view>
            <view class="bg-color2"></view>
            <view style="height: 118rpx"></view>
            <view class="banner" style="margin-top: 20rpx">
                <swiper
                    class="image-container"
                    :current="defaultIndex"
                    previous-margin="70rpx"
                    next-margin="70rpx"
                    :circular="true"
                    :autoplay="false"
                    @change="swiperChange"
                >
                    <swiper-item style="width: 100%" v-for="(item, index) in gradeList" :key="index">
                        <view :class="gradeDetail.id === item.id ? 'active' : 'gradine_bner'">
                            <view
                                style="position: relative; height: 254rpx; margin: 0 auto"
                                class="gradine_bner_img"
                                v-if="index == 0"
                                :class="defaultIndex == index ? 'activeZC' : 'activeSCal'"
                            >
                                <image
                                    style="width: 100%; height: 254rpx"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/gradebner1.png"
                                ></image>
                                <image
                                    style="
                                        position: absolute;
                                        float: right;
                                        top: 0;
                                        right: 0rpx;
                                        height: 50rpx;
                                        width: 120rpx;
                                        border-top-right-radius: 24rpx;
                                    "
                                    v-if="currentGrade.id == item.id"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/current_grade.png"
                                ></image>
                            </view>
                            <view
                                style="position: relative; width: 100%; height: 254rpx; margin: 0 auto"
                                class="gradine_bner_img"
                                v-if="index == 1"
                                :class="defaultIndex == index ? 'activeZC' : 'activeSCal'"
                            >
                                <image
                                    style="width: 100%; height: 254rpx"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/gradebner2.png"
                                ></image>
                                <image
                                    style="
                                        position: absolute;
                                        float: right;
                                        top: 0;
                                        right: 0rpx;
                                        height: 50rpx;
                                        width: 120rpx;
                                        border-top-right-radius: 24rpx;
                                    "
                                    v-if="currentGrade.id == item.id"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/current_grade.png"
                                ></image>
                            </view>
                            <view
                                style="position: relative; width: 100%; height: 254rpx; margin: 0 auto"
                                class="gradine_bner_img"
                                v-if="index == 2"
                                :class="defaultIndex == index ? 'activeZC' : 'activeSCal'"
                            >
                                <image
                                    style="width: 100%; height: 254rpx"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/gradebner3.png"
                                ></image>
                                <image
                                    style="
                                        position: absolute;
                                        float: right;
                                        top: 0;
                                        right: 0rpx;
                                        height: 50rpx;
                                        width: 120rpx;
                                        border-top-right-radius: 24rpx;
                                    "
                                    v-if="currentGrade.id == item.id"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/current_grade.png"
                                ></image>
                            </view>
                            <view
                                style="position: relative; width: 100%; height: 254rpx; margin: 0 auto"
                                class="gradine_bner_img"
                                v-if="index == 3"
                                :class="defaultIndex == index ? 'activeZC' : 'activeSCal'"
                            >
                                <image
                                    style="width: 100%; height: 254rpx"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/gradebner4.png"
                                ></image>
                                <image
                                    style="
                                        position: absolute;
                                        float: right;
                                        top: 0;
                                        right: 0rpx;
                                        height: 50rpx;
                                        width: 120rpx;
                                        border-top-right-radius: 24rpx;
                                    "
                                    v-if="currentGrade.id == item.id"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/current_grade.png"
                                ></image>
                            </view>
                            <view
                                style="position: relative; width: 100%; height: 254rpx; margin: 0 auto"
                                class="gradine_bner_img"
                                v-if="index == 4"
                                :class="defaultIndex == index ? 'activeZC' : 'activeSCal'"
                            >
                                <image
                                    style="width: 100%; height: 254rpx"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/gradebner5.png"
                                ></image>
                                <image
                                    style="
                                        position: absolute;
                                        float: right;
                                        top: 0;
                                        right: 0rpx;
                                        height: 50rpx;
                                        width: 120rpx;
                                        border-top-right-radius: 24rpx;
                                    "
                                    v-if="currentGrade.id == item.id"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/current_grade.png"
                                ></image>
                            </view>
                            <view
                                style="position: relative; width: 100%; height: 254rpx; margin: 0 auto"
                                class="gradine_bner_img"
                                v-if="index > 4"
                                :class="defaultIndex == index ? 'activeZC' : 'activeSCal'"
                            >
                                <image
                                    style="width: 100%; height: 254rpx"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/gradebner5.png"
                                ></image>
                                <image
                                    style="
                                        position: absolute;
                                        float: right;
                                        top: 0;
                                        right: 0rpx;
                                        height: 50rpx;
                                        width: 120rpx;
                                        border-top-right-radius: 24rpx;
                                    "
                                    v-if="currentGrade.id == item.id"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/grade/current_grade.png"
                                ></image>
                            </view>
                            <view class="gradine_bner_main">
                                <text class="gradeName">{{ item.name }}</text>
                                <view v-if="defaultIndex == index && defaultIndex < gradeList.length - 1">
                                    <progress
                                        class="gradeSpeed"
                                        :percent="
                                            (currentGrade.userScore / nextGrade.score) * 100 > 100
                                                ? 100
                                                : (userInfo.score / nextGrade.score) * 100
                                        "
                                        active="true"
                                        border-radius="5px"
                                        activeColor="#ffffff"
                                        backgroundColor="rgba(255,255,255,0.5)"
                                    ></progress>
                                    <text class="gradeNum"
                                        >累计积分：{{ currentGrade.userScore }}/{{ nextGrade.score }}</text
                                    >
                                </view>
                                <view v-if="defaultIndex > index"
                                    ><text class="gradeNum">当前的等级高于此等级</text></view
                                >
                                <view v-if="defaultIndex < index">
                                    <text class="gradeNum"
                                        >累积积分到达{{ item.score }},升级可获得{{ item.upgradeRewards }}积分</text
                                    >
                                </view>
                                <view v-if="defaultIndex == index && defaultIndex == gradeList.length - 1"
                                    ><text class="gradeNum">当前已达到最高等级</text></view
                                >
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <view class="gradeDetil-main">
            <view class="gradeDetil-main_top">等级权益</view>
            <view class="gradeDetil-main_item">1、购买商品享受{{ gradeDetail.shoppingDiscount }}折</view>
            <view class="gradeDetil-main_item" style="padding-bottom: 30rpx"
                >2、升级可获得{{ gradeDetail.upgradeRewards }}积分
            </view>
            <view style="width: 100%; background-color: #f6f6f6; height: 16rpx"></view>
            <view class="gradeDetil-main_content">
                <view class="gradeDetil-main_top">权益说明</view>
                <view v-html="gradeDetail.hierarchicalEquity" class="grade_content"></view>
            </view>
        </view>
    </view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
export default {
    data() {
        return {
            statusBarHeight: statusBarHeight,
            gradeList: [],
            currentGrade: {},
            nextGrade: {},
            gradeDetail: {},
            defaultIndex: 0,
            userInfo: this.$store.state.userInfo,
        };
    },
    onLoad() {
        this.requestList();
    },
    methods: {
        back() {
            uni.navigateBack();
        },
        swiperChange(e) {
            this.gradeDetail = this.gradeList[e.detail.current];
            this.gradeDetail.hierarchicalEquity = this.gradeDetail.hierarchicalEquity.replace(
                /<img/g,
                "<img style='max-width:100%;height:auto;'",
            );
        },
        reqeustMyGrade() {
            this.request.httpTokenRequest('/mp-api/wx/my/grade', null, 'POST', false).then((res) => {
                if (res.code == 0) {
                    this.currentGrade = res.data;
                    this.gradeList.forEach((item, index) => {
                        if (item.id == this.currentGrade.id) {
                            this.defaultIndex = index;
                        }
                    });
                    if (this.gradeList.length > this.defaultIndex + 1) {
                        this.nextGrade = this.gradeList[this.defaultIndex + 1];
                    }
                    this.gradeDetail = this.currentGrade;
                    this.gradeDetail.hierarchicalEquity = this.gradeDetail.hierarchicalEquity.replace(
                        /<img/g,
                        "<img style='max-width:100%;height:auto;'",
                    );
                }
            });
        },
        requestList() {
            this.request.httpTokenRequest('/mp-api/wx/my/grade/list', null, 'POST', false).then((res) => {
                if (res.code == 0) {
                    this.gradeList = res.data.list;
                    this.reqeustMyGrade();
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
body,
.gradeDetail {
    height: 100%;
    min-height: 100vh;
    background-position: center;
    background-color: #e0ede9;
}

uni-page-body,
html {
    height: 100%;
    background-color: #e0ede9;
}

.status_bar {
    height: 20px;
    width: 100%;
}

.search_nav_content {
    position: fixed;
    width: 100%;
    z-index: 998;
    height: 88rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.search_title {
    width: 180rpx;
    left: calc(50% - 90rpx);
    position: absolute;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    color: #000000;
    font-size: 32rpx;
    font-weight: 500;
}

.search_placeholder_view {
    height: 290rpx;
}

.gradeDetil-main-content {
    width: 92%;
    margin: 0 auto;
}

.activeSCal,
.activeZC {
    transform: scale(0.9, 0.9);
}

.active .activeZC,
.active .activeSCal {
    transform: scale(1) translateY(0rpx);
}

.grade_content {
    margin-top: 20rpx;
    margin-left: 40rpx;
    width: calc(100% - 80rpx);
}

.active {
    position: relative;
    width: 100%;
}

.gradine_bner_main {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    height: 100%;
    margin-left: 0;
}

.gradine_bner {
    .gradine_bner_main {
        padding-left: 70rpx;
        padding-right: 70rpx;
    }
}
</style>
